<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Supplies</title>
<style></style>

    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="../util/jquery-3.4.1.js"></script>
    <script src="../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/SUPPLIES.css">

</head>
<body id="wzbody">
<section id="wz">
    <div id="wzhead">
        <span class="wzgl">物资管理</span>
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" style="font-size: 16px">
            <span class="glyphicon glyphicon-plus">物资申领</span>
        </button>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">申请单</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">

                            <div class="form-group">
                                <label for="inputPerson" class="col-sm-2 control-label">物资编号</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control wzbh" id="inputPers" placeholder="如：0012 ~~0016  ">
                                </div>
                            </div>

                            <!--<div class="form-group">
                                <label for="inputdescribe" class="col-sm-2 control-label">物资名称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control sqwzmc" id="inputdescribe" placeholder="输入要申请的物资">
                                </div>
                            </div>-->
                            <div class="form-group">
                            <label for="inputPerson" class="col-sm-2 control-label">申请数量</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control sqwzsl" id="inputPerson" placeholder="输入数量">
                            </div>
                        </div>
                            <div class="form-group">
                                <label for="inputPerson" class="col-sm-2 control-label">申请人</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control sqsqr" id="inputP" placeholder="输入申请人姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPerson" class="col-sm-2 control-label">备注</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control sqbz" id="inputbz" placeholder="请写上备注">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

                        <button type="button" class="btn btn-primary tjbtn" data-dismiss="modal">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="wxlink"></div>


    <div id="tishi">
        <div class="yincang">
        <span><img src="../images/ok.png" style="height: 20px" width="20">:</span>
        <span>库存正常</span>//
        <span><img src="../images/jinggao.png" style="height: 20px" width="20">:</span>
        <span>有缺货风险，及时关注</span>
    </div>
        <div class="xianshi">
            <p><img src="../images/tishi.png" style="width: 20px" height="20"></p>

        </div>


    </div>


    <section id="wxwz">
        <table class="table table-condensed table-bordered  table-hover">
            <tr >
                <th class="wz1">物资编号</th>
                <th class="wz2">物资名称</th>
                <th class="wz3">剩余库存</th>
                <th class="wz4">上月消耗</th>
                <th class="wz5">状态</th>
            </tr>

            <tr class="success">
                <td>0012</td>
                <td>气球</td>
                <td><p class="kucun1"></p></td>
                <td><p class="xiaohao1"></td>
                <td><img class='photo1' src="../images/jinggao.png" style="width: 20px;height: 20px">
                    <img class="p1" src="../images/ok.png" height="20" width="20"/></td>

            </tr>
            <tr  class="success">
                <td>0013</td>
                <td>玩具飞机</td>
                <td><p class="kucun2"></p></td>
                <td><p class="xiaohao2"></td>
                <td><img class='photo2' src="../images/jinggao.png" style="width: 20px;height: 20px">
                    <img class="p2" src="../images/ok.png" height="20" width="20"/></td>

            </tr>
            <tr  class="success">
                <td>0014</td>
                <td>芭比娃娃</td>
                <td><p class="kucun3"></p></td>
                <td><p class="xiaohao3"></td>
                <td><img class='photo3' src="../images/jinggao.png"  style="width: 20px;height: 20px">
                    <img class="p3" src="../images/ok.png" height="20" width="20"/>
                </td>

            </tr>
            <tr  class="success">
            <td>0015</td>
            <td>玩具橡皮泥</td>
            <td><p class="kucun4"></p></td>
            <td><p class="xiaohao4"></td>
            <td><img class='photo4' src="../images/jinggao.png" style="width: 20px;height: 20px">
                <img class="p4" src="../images/ok.png" height="20" width="20"/></td>

            </tr>
            <tr  class="success">
                <td>0016</td>
                <td>玩具xx</td>
                <td><p class="kucun5"></p></td>
                <td><p class="xiaohao5"></td>
                <td><img class='photo5' src="../images/jinggao.png" style="width: 20px;height: 20px">
                    <img class="p5" src="../images/ok.png" height="20" width="20"/></td>

            </tr>
        </table>
    </section>

    <div id="wxqw">
        <span class="wxglwz">物资申请情况</span>
    </div>

    <section id="sqqk">
        <table class="table table-condensed table-bordered table-striped table-hover sqtable">
            <thead>
            <tr >
                <th class="wz1">物资编号</th>
                <th class="wz2">物资名称</th>
                <th class="wz3">申请数量</th>
                <th class="wz4">申请人</th>
                <th class="wz5">备注</th>
                <th class="wz6">操作</th>
            </tr>
            </thead>

            <tbody>
            <tr class="success">
                <td>无数据</td>
                <td>无数据</td>
                <td>无数据</td>
                <td>无数据</td>
                <td>无数据</td>
                <td>无数据</td>
            </tr>
            </tbody>
        </table>
    </section>
</section>

</body>
<script>

    var Mc=$('.sqwzmc');
    var Sl=$('.sqwzsl');
    var Sqr=$('.sqsqr');
    var Bz=$('.sqbz');
    var Bh=$('.wzbh');
    var tjBtn=$('.tjbtn');
    var oTable=$('.sqtable');



var arr1=JSON.parse(localStorage.getItem('data1')) || [];

    if(arr1.length){
        render();
    }

    /*------更具编号来改名称-----*/
function genggai(){
        $('.wb1').each(function () {
    if($(this).text().indexOf("0012")>-1){
        var DD=$(this).next();
        DD.text('气球');
    }
    if($(this).text().indexOf("0013")>-1){
        var DD=$(this).next();
        DD.text('玩具飞机');

    }
    if($(this).text().indexOf("0014")>-1){
        var DD=$(this).next();
        DD.text('芭比娃娃');

    }
    if($(this).text().indexOf("0015")>-1){
        var DD=$(this).next();
        DD.text('玩具橡皮泥');

    }
    if($(this).text().indexOf("0016")>-1){
        var DD=$(this).next();
        DD.text('玩具xx');

    }
})}

    /*----渲染*/
    function render(){
        oTable.find('tbody').html('');

        for(var i=0;i<arr1.length;i++){
            oTable.find('tbody').append('<tr  class="success">\n' +
                '                <td class="wb1">\n' +arr1[i].bh+ '</td>\n' +
                    '                <td>\n'+'<p class="mc1">'+'</p>\n'+'</td>\n' +
                '                <td class="sqshuliang">'+arr1[i].sl+'</td>\n' +
                '                <td>'+arr1[i].sqr+'</td>\n' +
                '                <td>'+arr1[i].bz+'</td>\n' +
                '                <td>\n' +
                '                    <button type="button" class="change btn btn-info btn-xs bgbtn icon-guanli">撤销</button>\n' +
                '                    <button type="button" class="del btn btn-danger btn-xs " data-target="bs-example-modal-sm0">&#xe62f;删除</button>\n' +
                '                </td>\n' +
                '            </tr>');
        };
genggai();
        localStorage.setItem('data1',JSON.stringify(arr1));
    }

    //添加
    tjBtn.click(function ass() {
        /*判断这里的val值是否为空，如数据不完整，不能添加arr*/
        if ((Mc.val())==''|| Sl.val()=='' || Sqr.val()=='' || Bz.val()==''){
            alert('请完善数据');
            arr1.splice()
        }
        else if (Bh.val()!=='0012' && Bh.val()!=='0013' && Bh.val()!=='0014'  && Bh.val()!=='0015'  &&   Bh.val()!=='0016' ){
            alert('没有该物资，请检查物资编号是否正确');
            arr1.splice()
        }
        else {
            arr1.unshift({
                bh:Bh.val(),
                mc:Mc.val(),
                sl:Sl.val(),
                sqr:Sqr.val(),
                bz:Bz.val(),
            });
        }

         Bh.val('');
        Mc.val('');
        Sl.val('');
        Sqr.val('');
        Bz.val('');/*点击后清除input val*/
        render();
        genggai()
    });
    /*删除*/
    oTable.on('click','.del',function () {
        var n=$(this).parents('tr').index();
        var t=$(this).parent().prev();
        var v=t.text();
        if (v=='已撤销'){
            arr1.splice(n,1);
            render();
            genggai()
        } else{
            alert('订单数据已生成，请先撤销后在删除')
        }/*人数大于零，不可以清空*/

        render();
        genggai()
    });
    /*修改*/
    oTable.on('click','.change',function () {
        var n=$(this).parents('tr').index();
        arr1.splice(n,1,{bh:'xxx',sj:'xxx',mc:'xxx',sl:'xxx',sqr:'xxx',bz:'已撤销'});
        render();
        genggai()
    });
    /*---------------全删功能--------------------------*/
    /*Wqs.click(function () {
        arr.splice(0);/!*删除数组*!/
        render();/!*再次渲染，没有数据*!/
    })*/


    /*-----这里是判断库存是否充足，然后提示--------*/
    function rnd(n,m) {
      return  Math.floor(Math.random()*(m-n)+n)}

/*----------随机函数，然后在确定--------------------*/
$(function () {
    window.onload=function () {
        var number = Math.random();
        number = Math.ceil(number * 100);
        $('.kucun1').text(rnd(40,60));
        $('.kucun2').text(rnd(40,60));
        $('.kucun3').text(rnd(40,60));
        $('.kucun4').text(rnd(40,60));
        $('.kucun5').text(rnd(40,60));


        $('.xiaohao1').text(rnd(30,40));
        $('.xiaohao2').text(rnd(30,40));
        $('.xiaohao3').text(rnd(30,40));
        $('.xiaohao4').text(rnd(30,40));
        $('.xiaohao5').text(rnd(30,40));

        var  k1=$('.kucun1').text();
        var  k2=$('.kucun2').text();
        var  k3=$('.kucun3').text();
        var  k4=$('.kucun4').text();
        var  k5=$('.kucun5').text();

        var x1=$('.xiaohao1').text();
        var x2=$('.xiaohao2').text();
        var x3=$('.xiaohao3').text();
        var x4=$('.xiaohao4').text();
        var x5=$('.xiaohao5').text();

        /*假设本月消耗和*/
        /*如果剩余库存减去上月小号的1.3倍，那么警告提示*/
        if ((k1-(x1*1.3)<0)){
            $('.p1').hide()
        }else {
            $('.photo1').hide()
        }

        if ((k2-(x2*1.3)<0)){
            $('.p2').hide()
        }else {
            $('.photo2').hide()
        }

        if ((k3-(x3*1.3)<0)){
            $('.p3').hide()
        }else {
            $('.photo3').hide()
        }

        if ((k4-(x4*1.3)<0)){
            $('.p4').hide()
        }else {
            $('.photo4').hide()
        }

        if ((k5-(x5*1.3)<0)){
            $('.p5').hide()
        }else {
            $('.photo5').hide()
        }

    }
})
    $(function () {
        $(".xianshi").on("mouseover", function(){
            $('.yincang').css('display','block')
        });
        $(".xianshi").on("mouseout", function(){
            $('.yincang').css('display','none')
        });
    })








</script>

</html>